<template>
  <div>
    <el-button @click="getReq">get请求</el-button>
    <el-button @click="getDelete">delete请求</el-button>
    <el-button @click="getPost">post请求</el-button>
    <el-button @click="getPut">put请求</el-button>

    <!-- 在tableZSGC.vue组件中实现el-table表格,表格固定有两个按钮,删除和更新
          调用get请求拿到表格数据,渲染到el-table中
     -->
    <hr />
    <el-button @click="getTable">渲染表格</el-button>
    <el-button @click="addTable">新增数据</el-button>
    <el-button @click="resetTable" type="info">清空表单</el-button>
    <hr />

    <!-- label-width="100px"设置宽度 -->
    <el-form label-width="100px" :model="formData" ref="form">
      <!-- 每个表单控件 -->
      <el-form-item label="姓名" prop="name">
        <!-- prop中的值必须是formData中的变量一致 -->
        <el-input v-model="formData.name"></el-input>
      </el-form-item>

      <el-form-item label="年龄" prop="age">
        <el-input v-model="formData.age"></el-input>
      </el-form-item>

      <el-form-item label="手机号" prop="phone">
        <el-input v-model="formData.phone"></el-input>
      </el-form-item>

      <el-form-item label="存款" prop="money">
        <el-input v-model="formData.money"></el-input>
      </el-form-item>
    </el-form>

    {{ formData }}
    <hr />

    <el-table :data="tableData">
      <el-table-column prop="id" fixed label="id"></el-table-column>
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
      <el-table-column prop="phone" label="电话"></el-table-column>
      <el-table-column prop="money" label="存款"></el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="deleteTable(scope.row)"
            >删除</el-button
          >
          <el-button type="text" size="small" @click="upDateTable(scope.row)"
            >更新</el-button
          >

          <!-- <el-button type="text" size="small" @click="addTable()"
            >新增</el-button -->
          <!-- > -->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      tableData: [],
      formData: {
        name: "",
        age: "",
        phone: "",
        money: "",
      },
    };
  },
  methods: {
    //调用接口四种方法
    //GET
    //POST
    //DELETE
    //PUT

    //get请求
    //第一个参数是URL地址
    //第二个参数是传递参数的数据对象(params)
    getReq() {
      axios
        .get("http://127.0.0.1:3000/api/test/list/testGet", {
          params: { name: "这是姓名", age: "年龄" },
        })
        .then((res) => {
          console.log(res);
        });
    },

    //delete请求,和get请求相似
    getDelete() {
      axios
        .delete("http://127.0.0.1:3000/api/test/delete/testDelete", {
          params: { name: "张三", age: 14 },
        })
        .then((res) => {
          console.log(res);
        });
    },

    //post请求
    getPost() {
      axios
        .post("http://127.0.0.1:3000/api/test/add/testPost", {
          post1: "这是第一个参数",
          post2: "这是第二个参数",
        })
        .then((res) => {
          console.log(res);
        });
    },

    //put请求
    getPut() {
      axios
        .put("http://127.0.0.1:3000/api/test/update/testUpdate", {
          post1: "111",
          post2: "222",
        })
        .then((res) => {
          console.log(res);
        });
    },

    //查询表格数据
    getTable() {
      axios.get("http://127.0.0.1:3000/api/test/list").then((res) => {
        console.log(res);
        this.tableData = res.data;
      });
    },

    //表格的删除操作
    //调用删除接口,重新获取表格数据
    //重新调用接口,刷新表格数据
    deleteTable(row) {
      this.$confirm("确定删除该条数据吗?").then(() => {
        axios
          .delete("http://127.0.0.1:3000/api/test/delete", {
            params: { id: row.id },
          })
          .then((res) => {
            console.log(res);
            this.getTable();
          });
      });
    },

    //新增数据到表格中
    //调用新增数据接口
    //重新调用接口,刷新表格数据
    addTable() {
      axios
        //this.formData--->{name:"223",age:'123'}
        //把对象中的属性在同层级展开
        //{...this.formData}--->{name:"223",age:'123'}
        //两种方法一样
        .post(
          "http://127.0.0.1:3000/api/test/add",
          this.formData

          //第三种方式
          // this.formData--->不打大括号

          //第一种方式绑定数据
          // {name:this.formData.name,
          // age:this.formData.age,
          // phone:this.formData.phone,
          // money:this.formData.money
          // }

          //第二种方式绑定数据
          // {...this.formData}

          // {
          //   name: "张三三",
          //   age: "18",
          //   phone: "1111111",
          //   money: "3333",
          // }
        )
        .then((res) => {
          console.log(res);

          this.$refs.form.resetFields();

          this.getTable(); //刷新表格
        });
    },

    //更新表格数据
    //调用更新数据接口
    //{id:必传参数  age  name  money}
    upDateTable(row) {
      axios
        .put(
          "http://127.0.0.1:3000/api/test/update",
          {
            id: row.id,

            ...this.formData,

            // name: this.formData.name,
            // age: this.formData.age,
            // phone:this.formData.phone,
            // money:this.formData.money,
          }

          // {
          //   id: row.id,
          //   name: "伍广",
          //   age: "21",
          //   phone: "2323",
          //   money: "100",
          // }
        )
        .then((res) => {
          console.log(res);

          this.$refs.form.resetFields(); //清空表单

          this.getTable(); //刷新表格
        });
    },

    //清空表单方法
    resetTable() {
      //第一步:在el-form上面声明ref属性
      //第二步:在el-form-item上面声明prop属性(prop中的值必须是formData中的变量一致)
      //第三步:调用resetFields()方法
      this.$refs.form.resetFields();

      //不可取,因为会把数据类型转为字符串
      // this.formData.name=''
      // this.formData.age=''
      // this.formData.phone=''
      // this.formData.money=''
    },
  },
  mounted() {
    // dom挂载之后执行
    this.getTable();
  },
};

//对象的深拷贝和浅拷贝
// let obj={
//   name:'tom',
//   age:'12',
//   phone:"123"
// }

//对象拷贝(浅拷贝,只拷贝地址,不拷贝值)
//第一种--->JSON.stringfy
// let newObj=JSON.parse(JSON.stringify(obj));

//第二种--->递归循环

//第三种--->展开符(...obj)
// let newObj={...obj};

//第四种--->assign方法
//两种解释
//1.对象的深拷贝
//2.对象合并
// let newObj=Object.assign({},obj,{money:100,test:123},{test2:1233})
// console.log("Object.assign",newObj);

// newObj.name='bob'
// console.log('newObj',newObj.name);
// console.log("obj",obj.name);
</script>

